<template>
	<div class='project'>
		<div class="project_fixed_top">
			<div class='context_top'>
				<div class='logo'>
					<img src="../assets/images/logo_B.png">
					<label><i>测试平台</i></label>
				</div>
				<div class="serach">
					<el-input v-model="searchValue" :placeholder="placeholderValue" class="input-with-select">
						<template #prefix>
							<el-icon class="el-input__icon"><search /></el-icon>
						</template>
						<template #prepend>
							<el-select v-model="selectValue" style="width: 120px; color: black;" @change="changePlaceholder">
								<el-option v-for='item in selectValues' :label="item.label" :value=item.option />
							</el-select>
						</template>
						<template #append>
							<el-button @click='searchProjects'>搜索</el-button>
						</template>
					</el-input>
				</div>
				<div class='add_project'>
					<el-button style="vertical-align: middle color: black;" @click="addProject">
						<el-icon style="vertical-align: middle; padding-bottom: 1px; padding-right:1px">
							<Plus />
						</el-icon>添加项目
					</el-button>
				</div>
				<div class='icon' v-on:mouseover="play_menu" v-on:mouseout="display_menu">
					<img src="../assets/images/user.png">
					<div id='menu'>
						<ul>
							<li>个人中心</li>
							<li @click="exitLogin">退出登录</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class='project_context'>
			<el-dialog v-model="addDialogVisible" title="添加项目">
			    <el-form :model="addProjectForm">
			      <el-form-item label="项目名称:" label-width="120px">
			        <el-input v-model="addProjectForm.name" autocomplete="off" placeholder="请输入项目名称"/>
			      </el-form-item>
				  <el-form-item label="项目负责人:" label-width="120px">
				    <el-input v-model="addProjectForm.leader" autocomplete="off" placeholder="请输入项目负责人"/>
				  </el-form-item>
				  <el-form-item label="项目描述:" label-width="120px">
				    <el-input v-model="addProjectForm.desc" autocomplete="off" placeholder="请输入项目描述"/>
				  </el-form-item>
			    </el-form>
			    <template #footer>
			      <span class="dialog-footer">
			        <el-button @click="addDialogVisible = false">取消</el-button>
			        <el-button type="primary" @click="saveEditProject">
			          确认
			        </el-button>
			      </span>
			    </template>
			</el-dialog>
			<el-dialog v-model="editDialogVisible" title="编辑项目">
			    <el-form :model="editProjectForm">
			      <el-form-item label="项目名称:" label-width="120px">
			        <el-input v-model="editProjectForm.name" autocomplete="off" placeholder="请输入项目名称"/>
			      </el-form-item>
				  <el-form-item label="项目负责人:" label-width="120px">
				    <el-input v-model="editProjectForm.leader" autocomplete="off" placeholder="请输入项目负责人"/>
				  </el-form-item>
				  <el-form-item label="项目描述:" label-width="120px">
				    <el-input v-model="editProjectForm.desc" autocomplete="off" placeholder="请输入项目描述"/>
				  </el-form-item>
			    </el-form>
			    <template #footer>
			      <span class="dialog-footer">
			        <el-button @click="editDialogVisible = false">取消</el-button>
			        <el-button type="primary" @click="updateProject">
			          确认
			        </el-button>
			      </span>
			    </template>
			</el-dialog>
			<el-card v-for='item, index in projectForm' class='project_card' :key=index>
				<div class='project_main_context' @click="jumpProjectHome(item)" style="cursor: pointer;">
					<span style="vertical-align: middle; margin-bottom: 2px;">负责人：{{item.leader}}</span>
					<img src="../assets/images/logo_black.png" style="vertical-align: middle; float: right; width:32px; height: 32px;">
					<p v-if="item.name.length < 6">项目名称：{{item.name}}</p>
					<el-tooltip v-else effect="light" :content="item.name" placement="right-start">
						<p>项目名称：{{item.name.slice(0, 6)}}...</p>
					</el-tooltip>
					<p v-if="item.desc.length < 8">项目描述：{{item.desc}}</p>
					<el-tooltip v-else effect="light" :content="item.desc" placement="right-start">
						<p >项目描述：{{item.desc.slice(0, 8)}}...</p>
					</el-tooltip>
				</div>
				<div class='editBtn'>
					<el-button class='left_btn' round type="primary" size="small" @click="editProject(item)">
						<el-icon style="vertical-align: middle; padding-bottom: 1px; padding-right:1px">
							<Edit />
						</el-icon>
						编辑
					</el-button>
					<el-button class=right_btn round type="primary" size="small" @click="deleteProject(item)">
						<el-icon style="vertical-align: middle; padding-bottom: 1px; padding-right:1px">
							<Delete />
						</el-icon>
						删除
					</el-button>
				</div>
				
			</el-card>
		</div>
	</div>
</template>
<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import {mapState} from 'vuex'

export default {
	computed:{
		...mapState(['projectInfo'])
	},
	data() {
		return {
			projectForm: [],
			selectValues: [
				{
					id: 1,
					option: 'name',
					label: '项目名称',
					placeholder: '按项目名称搜索'
				},
				{
					id: 2,
					option: 'desc',
					label: '项目描述',
					placeholder: '按项目描述搜索'
				},
				{
					id: 3,
					option: 'leader',
					label: '项目负责人',
					placeholder: '按项目负责人搜索'
				},
			],
			selectValue: '',
			searchValue: '',
			placeholderValue: '',
			addDialogVisible: false,
			editDialogVisible: false,
			addProjectForm: {
				name: '',
				desc: '',
				leader: ''
			},
			editProjectForm: {
				name: '',
				desc: '',
				leader: '',
				id: ''
			}
		}
	},
	methods: {
		async searchProjects(){
			const searchParams = {
				[this.selectValue]: this.searchValue
			}
			const response = await this.$api.getProjects(searchParams)
			if (response.status === 200){
				this.projectForm = response.data
			}
			
		},
		async getProjects(){
			const response = await this.$api.getProjects()
			if (response.status === 200){
				this.projectForm = response.data.results
			}
			
		},
		changePlaceholder(value){
			const index = this.selectValues.findIndex(item=>{
				return value === item.option
			}) 
			this.placeholderValue = this.selectValues[index].placeholder
		},
		play_menu(){
			document.getElementById('menu').style='display:block;'
		},
		jumpProjectHome(item){
			this.$store.commit('saveProjectInfo', item)
			this.$store.commit('addTags', {path: '/project/index', name: '项目首页'})
			this.$router.push({name: 'index'})
		},
		addProject(){
			this.addDialogVisible = true
		},
		editProject(item){
			this.editDialogVisible = true
			this.editProjectForm = {...item}
		},
		saveProject(){
			this.addDialogVisible = false
			this.projectForm.push({...this.addProjectForm})
		},
		async saveEditProject(){
			const response = await this.$api.createProject(this.addProjectForm)
			if (response.status === 201){
				this.getProjects()
				ElMessage({
				  type: 'success',
				  message: '添加成功',
				})
			}
			// const index = this.projectForm.findIndex(item=>{
			// 	return item.id === this.editProjectForm.id
			// })
			// this.projectForm[index] = {...this.editProjectForm}
			this.addDialogVisible = false
		},
		async updateProject(item){
			const response = await this.$api.updateProject(this.editProjectForm.id, this.editProjectForm)
			if (response.status === 200){
				this.getProjects()
				ElMessage({
				  type: 'success',
				  message: '保存成功',
				})
			}
			this.editDialogVisible = false
		},
		deleteProject(item){
			ElMessageBox.confirm(
			    '项目删除后不可恢复，确定删除该项目吗?',
			    '提示',
			    {
			      confirmButtonText: '确认',
			      cancelButtonText: '取消',
			      type: 'warning',
			    }
			  )
			    .then(async() => {
				  const response = await this.$api.deleteProject(item.id)
				  if (response.status === 204){
					  this.getProjects()
					  ElMessage({
					    type: 'success',
					    message: '删除成功',
					  })
				  }
				  
			    })
			    .catch(() => {
					
			    })
		},
		display_menu(){
			document.getElementById('menu').style='display:none; background-color: white;'
		},
		exitLogin() {
			ElMessageBox.confirm(
			    '确定退出登录吗?',
			    '提示',
			    {
			      confirmButtonText: '确认',
			      cancelButtonText: '取消',
			      type: 'warning',
			    }
			  )
			    .then(() => {
				  this.$router.push({name: 'login'})
				  window.localStorage.removeItem('token')
			      ElMessage({
			        type: 'success',
			        message: '退出登录',
			      })
			    })
			    .catch(() => {
		
			    })
		}
	},
	created() {
		this.selectValue = this.selectValues[0].option
		this.placeholderValue = this.selectValues[0].placeholder
		this.getProjects()
	}
}
</script>

<style scoped>
	.project_fixed_top{
		width: 100%;
		height: 70px;
		position: fixed;
		background-color: royalblue;
	}
	.context_top{
		width: 1200px;
		height: 70px;
		margin: 0 auto;
		background-color: royalblue;
	}
	.logo{
		float: left;
		height: 70px;
		padding-top: 11px;
		box-sizing: border-box;
		
	}
	.logo img {
		display: inline-block;
		width: 48px;
		height: 48px;
		vertical-align: middle;
	}
	.logo label{
		display: inline-block;
		color: white;
		font-size: 32px;
		vertical-align: middle;
	}
	.serach{
		float: left;
		margin-left: 80px;
		width: 500px;
		height: 70px;
		padding-top: 19px;
		box-sizing: border-box;
	}
	.serach .el-input{
		--el-input-focus-border-color: white;
    }
	.serach .el-select{
		--el-select-input-focus-border-color:white;
	}
	.serach .el-button>span:hover{
		color: cornflowerblue;
	}
	.add_project{
		float: left;
		padding-left: 230px;
		height: 70px;
		padding-top: 19px;
		box-sizing: border-box;
	}
	.icon{
		float: right;
		height: 70px;
		width: 90px;
		padding: 11px 0px;
		box-sizing: border-box;
	}
	.icon ul{
		list-style: none;
		width: 90px;
		background-color: white;
		padding-top: 10px;
		padding-left: 0;
		border-radius: 8px;
		z-index: 1000px;
		box-shadow: 0 8px 30px rgba(0,80,179,.12);
	}
	.icon li {
		width: 90px;
		padding-bottom: 10px;
		text-align: center;
		color: black;
	}
	.icon li:hover{
		color: royalblue;
	}
	#menu {
		display: none;
		width: 90px;
		height: 70px;
		position: relative;
		top: -20px;
		left: -20px;
	}
	.project_context{
		margin: 0 auto;
		width: 1200px;
		padding: 70px 0;
	}
	.project_context .project_card{
		float: left;
		width: 275px;
		margin: 20px 20px 0px 0;
		height: 130px;
/* 		background-color: royalblue; */
	}
	.project_context p {
		margin: 0 0 1px 0;
	}
	.project_context .editBtn{
		margin: 10px auto;
		width: 200px;
		background-color: red;
	}
	.project_context .left_btn{
		float: left;
	}
	.project_context .right_btn{
		float: right}
</style>